<template>
  <a-layout class="merchant-layout">
    <!-- 侧边栏 -->
    <a-layout-sider
      :collapsed="collapsed"
      :collapsible="true"
      :width="220"
      breakpoint="xl"
      @collapse="handleCollapse"
      class="layout-sider"
    >
      <!-- Logo -->
      <div class="logo">
        <img src="@/assets/logo.png" alt="Logo" />
        <span v-show="!collapsed">商家中心</span>
      </div>

      <!-- 菜单 -->
      <a-menu
        :selected-keys="selectedKeys"
        :default-open-keys="openKeys"
        :style="{ width: '100%' }"
        @menu-item-click="handleMenuClick"
      >
        <a-menu-item key="dashboard">
          <template #icon><icon-dashboard /></template>
          数据概览
        </a-menu-item>

        <a-sub-menu key="products">
          <template #icon><icon-gift /></template>
          <template #title>商品管理</template>
          <a-menu-item key="products/list">商品列表</a-menu-item>
          <a-menu-item key="products/inventory">库存管理</a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="orders">
          <template #icon><icon-shopping-cart /></template>
          <template #title>订单管理</template>
          <a-menu-item key="orders/list">订单列表</a-menu-item>
          <a-menu-item key="orders/after-sales">售后管理</a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="marketing">
          <template #icon><icon-fire /></template>
          <template #title>营销管理</template>
          <a-menu-item key="marketing/coupon">优惠券</a-menu-item>
          <a-menu-item key="marketing/promotion">促销活动</a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="finance">
          <template #icon><icon-money /></template>
          <template #title>财务管理</template>
          <a-menu-item key="finance/overview">财务概览</a-menu-item>
          <a-menu-item key="finance/settlement">结算管理</a-menu-item>
        </a-sub-menu>

        <a-menu-item key="comments">
          <template #icon><icon-message /></template>
          评价管理
        </a-menu-item>

        <a-sub-menu key="settings">
          <template #icon><icon-settings /></template>
          <template #title>商户设置</template>
          <a-menu-item key="settings/basic">基本信息</a-menu-item>
          <a-menu-item key="settings/security">安全设置</a-menu-item>
          <a-menu-item key="settings/notification">通知设置</a-menu-item>
          <a-menu-item key="settings/payment">支付设置</a-menu-item>
          <a-menu-item key="settings/store">店铺设置</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>

    <!-- 主要内容区 -->
    <a-layout>
      <!-- 头部 -->
      <a-layout-header class="layout-header">
        <!-- 折叠按钮 - 只在小屏幕显示 -->
        <a-button
          class="collapse-btn"
          type="text"
          @click="toggleCollapse"
          v-show="isMobile"
        >
          <icon-menu-fold v-if="!collapsed" />
          <icon-menu-unfold v-else />
        </a-button>

        <!-- 面包屑 -->
        <a-breadcrumb class="breadcrumb">
          <a-breadcrumb-item>商家中心</a-breadcrumb-item>
          <a-breadcrumb-item>{{ currentRoute }}</a-breadcrumb-item>
        </a-breadcrumb>

        <!-- 右侧工具栏 -->
        <div class="header-actions">
          <!-- 通知 -->
          <a-badge :count="5" class="action-item">
            <a-button type="text" class="icon-button">
              <template #icon><icon-notification /></template>
            </a-button>
          </a-badge>

          <!-- 全屏 -->
          <a-button type="text" @click="toggleFullscreen" class="icon-button">
            <template #icon>
              <icon-fullscreen-exit v-if="isFullscreen" />
              <icon-fullscreen v-else />
            </template>
          </a-button>

          <!-- 用户信息 -->
          <a-dropdown trigger="click" position="br">
            <div class="user-dropdown">
              <a-avatar :size="32" :src="merchantInfo.avatar" />
              <span class="username" v-show="!collapsed">{{
                merchantInfo.name
              }}</span>
            </div>
            <template #content>
              <a-doption
                class="dropdown-item"
                @click="router.push('/merchant/profile')"
              >
                <template #icon><icon-user /></template>
                个人信息
              </a-doption>
              <a-doption
                class="dropdown-item"
                @click="router.push('/merchant/profile/settings')"
              >
                <template #icon><icon-settings /></template>
                账号设置
              </a-doption>
              <a-divider style="margin: 4px 0" />
              <a-doption class="dropdown-item" @click="handleLogout">
                <template #icon><icon-export /></template>
                退出登录
              </a-doption>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>

      <!-- 内容区 -->
      <a-layout-content class="layout-content">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </a-layout-content>

      <!-- 页脚 -->
      <a-layout-footer class="layout-footer">
        Copyright © 2024 贵港文旅+ 商家中心
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  IconDashboard,
  IconGift,
  IconShoppingCart,
  IconFire,
  IconMoney,
  IconMessage,
  IconSettings,
  IconMenuFold,
  IconMenuUnfold,
  IconNotification,
  IconFullscreen,
  IconFullscreenExit,
  IconUser,
  IconExport,
} from "@arco-design/web-vue/es/icon";

const router = useRouter();
const route = useRoute();

// 响应式状态
const collapsed = ref(false);
const isFullscreen = ref(false);
const isMobile = ref(false);

// 检查是否为移动设备
const checkIsMobile = () => {
  isMobile.value = window.innerWidth <= 768;
  if (!isMobile.value) {
    collapsed.value = false;
  }
};

// 监听窗口大小变化
onMounted(() => {
  checkIsMobile();
  window.addEventListener("resize", checkIsMobile);
});

onUnmounted(() => {
  window.removeEventListener("resize", checkIsMobile);
});

// 侧边栏折叠控制
const handleCollapse = (val) => {
  collapsed.value = val;
};

const toggleCollapse = () => {
  collapsed.value = !collapsed.value;
};

// 全屏控制
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
    isFullscreen.value = true;
  } else {
    document.exitFullscreen();
    isFullscreen.value = false;
  }
};

// 菜单状态
const selectedKeys = computed(() => {
  const path = route.path.slice(1);
  if (path === "settings") {
    return [`settings/${route.query.tab || "basic"}`];
  }
  return [path];
});

const openKeys = computed(() => {
  const path = route.path.slice(1);
  return [path.split("/")[0]];
});

// 当前路由名称
const currentRoute = computed(() => {
  const routeMap = {
    dashboard: "数据概览",
    "products/list": "商品列表",
    "products/inventory": "库存管理",
    "orders/list": "订单列表",
    "orders/after-sales": "售后管理",
    "marketing/coupon": "优惠券",
    "marketing/promotion": "促销活动",
    "finance/overview": "财务概览",
    "finance/settlement": "结算管理",
    comments: "评价管理",
    settings: "商户设置",
  };
  return routeMap[route.path.slice(1)] || "首页";
});

// 商家信息
const merchantInfo = ref({
  avatar: "/images/avatar.jpg",
  name: "示例商家",
  shopName: "示例店铺",
});

// 处理菜单点击
const handleMenuClick = (key) => {
  if (key.startsWith("settings/")) {
    const tab = key.split("/")[1];
    router.push({
      path: "/settings",
      query: { tab },
    });
  } else {
    router.push(`/${key}`);
  }
  if (isMobile.value) {
    collapsed.value = true;
  }
};

// 处理退出登录
const handleLogout = () => {
  // 实现退出登录的逻辑
};
</script>

<style lang="scss" scoped>
.merchant-layout {
  @apply h-screen;

  .layout-sider {
    @apply h-full flex flex-col bg-[#001529] transition-all duration-300 ease-in-out;

    .logo {
      @apply h-16 flex items-center px-4 border-b border-gray-800;

      img {
        @apply h-8 w-8 transition-transform duration-300;
      }

      span {
        @apply ml-2 text-lg font-medium text-white opacity-100 transition-opacity duration-300;
      }
    }

    &.collapsed {
      .logo span {
        @apply opacity-0;
      }
    }

    :deep(.arco-menu) {
      @apply bg-transparent border-none;

      .arco-menu-item {
        @apply text-gray-400 hover:text-white hover:bg-primary-900;

        &.arco-menu-selected {
          @apply text-white bg-primary-800;
        }
      }

      .arco-sub-menu-title {
        @apply text-gray-400 hover:text-white hover:bg-primary-900;
      }
    }
  }

  .layout-header {
    @apply h-16 px-4 flex items-center justify-between bg-white border-b border-gray-200 shadow-sm;

    .collapse-btn {
      @apply mr-4 text-lg hover:bg-gray-100 transition-colors;
    }

    .breadcrumb {
      @apply flex-1 ml-2;
    }

    .header-actions {
      @apply flex items-center space-x-4;

      .action-item {
        @apply flex items-center;
      }

      .icon-button {
        @apply hover:bg-gray-100 transition-colors;
      }

      .user-dropdown {
        @apply flex items-center space-x-2 cursor-pointer px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors;

        .username {
          @apply text-sm text-gray-700;
        }
      }
    }
  }

  .layout-content {
    @apply p-6 min-h-[calc(100vh-144px)] bg-gray-50 overflow-auto;
  }

  .layout-footer {
    @apply h-16 flex items-center justify-center text-gray-500 text-sm bg-white border-t border-gray-200;
  }
}

// 下拉菜单样式
:deep(.arco-dropdown-menu) {
  @apply min-w-[160px] p-1;

  .dropdown-item {
    @apply flex items-center px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg transition-colors;

    .arco-icon {
      @apply mr-2 text-gray-500;
    }
  }
}

// 路由切换动画
.fade-enter-active,
.fade-leave-active {
  @apply transition-opacity duration-300;
}

.fade-enter-from,
.fade-leave-to {
  @apply opacity-0;
}

// 响应式样式
@media (max-width: 768px) {
  .layout-sider {
    @apply fixed z-50 h-full;

    &:not(.collapsed) {
      @apply w-64;
    }
  }

  .layout-header {
    .breadcrumb {
      @apply hidden md:flex;
    }

    .header-actions {
      .username {
        @apply hidden;
      }
    }
  }
}
</style>
